<template>
  <div class="search-scroll-wrapper" ref="wrapper">
    <div class="content">
      <template v-if="!searchData.status">
          <no-data-tip
          v-if="!isShowViewList &&
                !isShowFoodList &&
                !isShowHotelList &&
                !isShowMassageList &&
                !isShowKtvList
          "
          ></no-data-tip>
          <!-- 滚动的内容区域 -->
          <template v-if="isShowViewList">
            <home-title recomTitle="景点结果："></home-title>
            <view-list :viewData="searchData.viewDatas"></view-list>
          </template>

          <template v-if="isShowFoodList">
            <home-title recomTitle="美食结果："></home-title>
            <food-list :foodDatas="searchData.foodDatas"></food-list>
          </template>

          <template v-if="isShowHotelList">
            <home-title recomTitle="酒店结果："></home-title>
            <hotel-list :hotelDatas="searchData.hotelDatas"></hotel-list>
          </template>

          <template v-if="isShowMassageList">
            <home-title recomTitle="按摩结果："></home-title>
            <massage-list :massageDatas="searchData.massageDatas"></massage-list>
          </template>

          <template v-if="isShowKtvList">
            <home-title recomTitle="KTV结果："></home-title>
            <ktv-list :ktvDatas="searchData.ktvDatas"></ktv-list>
          </template>
      </template>
      
      <error-msg :errShow="searchData.status == -1"></error-msg>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import ViewList from './ViewList'
import FoodList from './FoodList'
import HotelList from './HotelList'
import MassageList from './MassageList'
import KtvList from './KtvList'
import NoDataTip from './Sub/NoDataTip.vue'

import HomeTitle from './Sub/HomeTitle.vue'
import ErrorMsg from './Sub/ErrorMes.vue'

export default {
  name: 'SearchScrollWrapper',
  props: {
    searchData: Object,
  },
  components: {
    ViewList,
    FoodList,
    HotelList,
    MassageList,
    KtvList,
    HomeTitle,
    NoDataTip,
    ErrorMsg
  },
  computed: {
    isShowViewList () {
      return this.searchData.viewDatas  && 
             this.searchData.viewDatas.length > 0
    },
    isShowFoodList () {
      return this.searchData.foodDatas &&
             this.searchData.foodDatas.length > 0
    },
    isShowHotelList() {
      return this.searchData.hotelDatas &&
             this.searchData.hotelDatas.length > 0
    },
     isShowMassageList () {
      return this.searchData.massageDatas &&
             this.searchData.massageDatas.length > 0
    },
     isShowKtvList () {
      return this.searchData.ktvDatas &&
             this.searchData.ktvDatas.length > 0
    },
  },
  mounted () {
    this.scroll = new BetterScroll(this.$refs.wrapper, {
      scrollY: true,
    });
    console.log(this.scroll);
  },
  // 组件内响应式数据变化触发
  watch: {
    searchData (newValue) {
      // 等待视图更新完毕
      console.log(this.searchData);
      this.$nextTick(() => {
        this.scroll.refresh();
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.search-scroll-wrapper {
  height: calc(100% - 1rem);
  overflow: hidden;
}
</style>